<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">待收货</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 标签导航 -->
            <el-tabs v-model="OrderName" type="card" @tab-click="order_status">
                <el-tab-pane label="待收货" name="在途"></el-tab-pane>
            </el-tabs>
            <el-table :data="OrderList" border stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="ordername" label="发货单号">
                </el-table-column>
                <el-table-column prop="tag_id" label="标签ID">
                </el-table-column>
                <el-table-column prop="name" label="货物类型">
                </el-table-column>
                <el-table-column prop="scope_temp" label="安全温度(℃)">
                </el-table-column>
                <el-table-column prop="ent_time" label="记录间隔">
                </el-table-column>
                <el-table-column prop="delay_time" label="启动延时">
                </el-table-column>
                <el-table-column prop="start_time" label="开始时间">
                </el-table-column>
                <el-table-column prop="end_time" label="结束时间">
                </el-table-column>
                <el-table-column prop="cond" label="运单状态">
                </el-table-column>
                <el-table-column prop="temp_log" label="温度记录">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip class="item" effect="dark" content="收货" placement="top" :enterable="false" v-if="scope.row.cond === '在途'">
                            <el-button type="primary" size="mini" @click="UpOrderStatus(scope.$index+1, scope.row)">
                                <i class="el-icon-thumb"></i>
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="this.pagination.page" :page-sizes="this.pagination.sizes" :page-size="this.pagination.size" :layout="this.pagination.layout" :total="this.pagination.total" background>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { order_status_get, take_order_put } from '../axios_api/api'
import moment from 'moment'
export default {
    data() {
        return {
            OrderList: [],
            OrderName: '在途',
            timevalue: '',
            pagination: {
                layout: "total, sizes, prev, pager, next, jumper",
                sizes: [10, 30, 50, 100],
                page: 1,
                size: 10,
                total: 0,
            },
        }
    },
    mounted() {
        this.order_status();
    },
    methods: {
        currentChange() {
            this.order_status();
        },
        sizeChange() {
            this.order_status();
        },
        // 收货操作
        UpOrderStatus(index, data) {
					let datas = {data:data}
            take_order_put(datas).then(resp => {
							this.$message.success('收货成功')
							this.$router.push('/order_info')
            })
        },
        // 获取在途中的运单
        order_status() {
            let params = { OrderName: this.OrderName, page: this.pagination.page, size: this.pagination.size }
            order_status_get(params).then(resp => {
                for (let i = 0; i < resp.orderlist.length; i++) {
                    resp.orderlist[i].start_time = moment(resp.orderlist[i].start_time).format('YYYY-MM-DD HH:mm:ss')
                    resp.orderlist[i].end_time = moment(resp.orderlist[i].end_time).format('YYYY-MM-DD HH:mm:ss')
                    if (resp.orderlist[i].end_time === 'Invalid date') resp.orderlist[i].end_time = '暂无'
                    if (resp.orderlist[i].cond === 1) resp.orderlist[i].cond = '在途'
                    if (!resp.orderlist[i].temp_log) resp.orderlist[i].temp_log = '正常'
                }
                console.log(resp)
                this.pagination.total = resp.total
                this.OrderList = resp.orderlist
            })
        },
    }
}
</script>

<style>
</style>